<template>
	<view class="box">
		<view class="bg" :style="{background:'url('+ $BASE_URL +picList[0]  +')',backgroundSize:'100%'}">


			<view class="row1">
				<view class="row">
					<image class="title-img" :src="$BASE_URL +picList[1]" mode="aspectFill"></image>
					<view class="row-title">
						实力出圈
					</view>
				</view>
				<view class="content">
					<goodsCard :picList='picList'></goodsCard>
				</view>
			</view>
			<view class="row2">
				<view class="row">
					<image class="title-img" :src="$BASE_URL +picList[2]" mode="aspectFill"></image>
					<view class="row-title">
						性价比之王
					</view>
				</view>
				<view class="content">
					<goodsCard :picList='picList'></goodsCard>
				</view>
			</view>
			<view class="row3">
				<view class="row">
					<image class="title-img" :src="$BASE_URL +picList[3]" mode="aspectFill"></image>
					<view class="row-title">
						电力十足
					</view>
				</view>
				<view class="content">
					<goodsCard :picList='picList'></goodsCard>
				</view>
			</view>
			<view class="row4">
				<view class="row">
					<image class="title-img" :src="$BASE_URL +picList[4]" mode="aspectFill"></image>
					<view class="row-title">
						神技能爆满
					</view>
				</view>
				<view class="content">
					<goodsCard :picList='picList'></goodsCard>
				</view>
			</view>

			<view class="bottom-icon">
				<image :src="$BASE_URL +picList[5]" alt="" mode='aspectFill' />
			</view>

		</view>

	</view>
</template>

<script>
	import goodsCard from './components/goods_card.vue'
	export default {
		components: {
			goodsCard

		},
		data() {
			return {
				picList: []
			}

		},
		mounted() {
			this.$http('common.getPic', {

			}).then(res => {
				if (res.code === 1) {
					this.picList = res.data.result.activeone
				}
			});
		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100%;
		// min-height: 100vh;
		// background-size: 100% 100%;

		.bg {
			.bottom-icon {
				width: 100%;
				height: 136rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 660rpx;
					height: 126rpx;
				}
			}

			width: 100%;
			min-height: 100vh;
			background-size: cover !important;
			background-repeat: no-repeat;
			padding-top: 700rpx;
			padding-bottom: 30rpx;

			.row1 {
				.title-img {
					// margin: 0 auto;
					width: 403rpx;
					height: 47rpx;
				}
			}

			.row2 {
				.title-img {
					// margin: 0 auto;
					width: 350rpx;
					height: 47rpx;
				}
			}

			.row3 {
				.title-img {
					// margin: 0 auto;
					width: 473rpx;
					height: 47rpx;
				}
			}

			.row4 {
				.title-img {
					// margin: 0 auto;
					width: 353rpx;
					height: 47rpx;
				}
			}

			.row {
				height: 78rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.row-title {
					position: absolute;
					font-size: 36rpx;
					color: #fff;
					font-weight: 900;
				}
			}

			.content {
				border-radius: 20rpx;
				margin: 20rpx auto;
				width: 710rpx;
				height: 280rpx;
				background-color: #fff;
			}

		}


	}
</style>
